<template>
  <div class="broadcastCardContainer" :class="className" :style="style">
    <div class="broadcastCardPic">
      <div class="broadcastCardPicInner">
        <img :src="data.sPicUrl" :alt="data.name" />
      </div>
    </div>
    <div class="broadcastCardTitle">
      {{ data.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { BroadCastItem } from "@/types/index";

defineProps<{
  className?: string;
  style?: any;
  data: BroadCastItem;
  key?: any;
}>();
</script>

<style scoped lang="less">
.broadcastCardPic {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.1px;
    padding-top: 56%;
  }

  .broadcastCardPicInner {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.broadcastCardTitle {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>
